<template>
  <div>
    <header>
      <div class="logo">
        <h3>UNI-ADMIN</h3>
      </div>
      <nav>
        <ul>
          <li v-for="(item, index) in NavArr" :key="index" @click="clk(index)" :class="{active:showIndex==index}">{{ item.name }}</li>
          <li>
            <i></i>admin
            <ul class="showUl">
              <li>修改</li>
              <li>退出</li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      showIndex: 0,
        NavArr: [],
    };
  },
  methods: {
    clk(n) {
      this.showIndex = n;
      console.log(this.showIndex);
      if (n == 0) {
        this.$router.push("/index");
      } else if (n == 1) {
        this.$router.push("/shop");
      } else if (n == 2) {
        this.$router.push("/order");
      } else if (n == 3) {
        this.$router.push("/user");
      } else if (n == 4) {
        this.$router.push("/set");
      }
    },
  },
  created() {
    this.NavArr = JSON.parse(sessionStorage.userInfo).tree;
    // console.log(this.NavArr);
    // console.log(this.$route.path);
     let path = this.$route.path;
      switch(path){
                case '/index':  this.showIndex=0 ; break;
                case '/shop/goods':   this.showIndex=1; break;
      }
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  background: #545c64;
  line-height: 60px;
}
header .logo {
  float: left;
  color: #fff;
  width: 300px;
}
header nav > ul {
  float: right;
}
header nav > ul > li {
  float: left;
  list-style: none;
  color: #fff;
  height: 60px;
  padding: 0 20px;
}
.active {
  border-bottom: 3px solid #ff5500;
  color: #ff5500;
}
header nav > ul > li:hover {
  background: rgb(59, 59, 59);
  transition: all 0.5s linear;
}
header nav > ul > li:nth-child(7) {
  width: 160px;
  padding-left: 80px;
  position: relative;
}
header nav > ul > li:nth-child(7) .showUl {
  display: none;
  position: absolute;
  left: -30px;
  top: 65px;
  width: 200px;
  background: rgb(80, 80, 80);
}
header nav > ul > li:nth-child(7) .showUl li {
  width: 200px;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
header nav > ul > li:nth-child(7):hover .showUl {
  display: block;
}
header nav > ul > li:nth-child(7) > i {
  position: absolute;
  left: 30px;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #000;
  background: #ccc;
}
</style>